<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<body>
<div id="app" >
    <div style="width: 600px;margin: 0 auto;background: #fff">
        <h1 align="center">管理员登录</h1>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="ruleForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="ruleForm.password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>

</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
   let v =  new Vue({
        el: '#app',
        data: function() {
            return {
                ruleForm: {
                    username:"",
                    password:""
                },
                rules: {
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                        {min: 4, max: 15, message: '长度在 4 到 15 个字符', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 4, max: 15, message: '长度在 4 到 15 个字符', trigger: 'blur'}
                    ],
                }
            }
        },
       methods:{
           submitForm(formName) {
               /*以下这句，当点击登录时，执行submitForm，对所有输入框验证执行一遍，
               如果全部通过，valid为true，否则为false*/
               this.$refs[formName].validate((valid) => {
                   if (valid) {
                       alert('submit!');
                   } else {
                       console.log('error submit!!');
                       return false;
                   }
               });
           },
           resetForm(formName) {
               this.$refs[formName].resetFields();
           }
       }
    })
</script>
</html>